{% extends "../../_basic.twig" %}

{% block header %}
    <script src="../../../src/aux-slider/index.js?v={{random()}}"></script>
    <link rel="stylesheet" href="../../../src/aux-slider/index.css?v={{random()}}">
    <style>
        aux-slider-item {            
            display: block;
        }
    </style>
{% endblock %}

{% block body %}
    <div>      
        <h3>默认</h3>   
        <aux-slider id="slider">
            <aux-slider-item>Hi, I'm slide 1</aux-slider-item>
            <aux-slider-item>Hi, I'm slide 2</aux-slider-item>
            <aux-slider-item>Hi, I'm slide 3</aux-slider-item>
            <aux-slider-item>Hi, I'm slide 4</aux-slider-item>
        </aux-slider>
        <aux-button id="next">next slider</aux-button>
        <script>
            document.getElementById("next").addEventListener("click", function() {
                document.getElementById("slider").next();
            });
        </script>
    </div>
{% endblock %}
